<template>
	<div class="register-container">
	  <canvas id="canvas-bg"></canvas>
	  
	  <div class="register-form">
		<h2 class="register-title">用户注册</h2>
		<el-form 
		  ref="registerFormRef" 
		  :model="registerForm" 
		  :rules="rules"
		  label-width="auto" 
		  class="demo-ruleForm" 
		  status-icon
		>
		  <el-form-item label="用户名" prop="u_name">
			<el-input 
			  v-model="registerForm.u_name" 
			  placeholder="请输入用户名"
			  prefix-icon="el-icon-user"
			/>
		  </el-form-item>
		  
		  <el-form-item label="邮箱" prop="u_email">
			<el-input 
			  v-model="registerForm.u_email" 
			  placeholder="请输入邮箱"
			  prefix-icon="el-icon-message"
			/>
		  </el-form-item>
		  
		  <el-form-item label="密码" prop="u_pwd">
			<el-input 
			  v-model="registerForm.u_pwd" 
			  type="password" 
			  placeholder="请输入密码"
			  prefix-icon="el-icon-lock"
			  show-password
			/>
		  </el-form-item>
		  
		  <el-form-item label="确认密码" prop="confirmPwd">
			<el-input 
			  v-model="registerForm.confirmPwd" 
			  type="password" 
			  placeholder="请再次输入密码"
			  prefix-icon="el-icon-lock"
			  show-password
			/>
		  </el-form-item>
		  
		  <el-form-item>
			<el-button 
			  type="primary" 
			  class="submit-button" 
			  @click="submitForm(registerFormRef)"
			  :loading="loading"
			>
			  注册
			</el-button>

			
		  </el-form-item>
		  
		  <div class="form-footer">
			<span>已有账号？</span>
			<a href="/">立即登录</a>
		  </div>
		</el-form>
	  </div>
	</div>
  </template>
  
  <script lang="ts" setup>
  import { reactive, ref, onMounted } from 'vue'
  import type { FormInstance, FormRules } from 'element-plus'
  import { ElMessage } from 'element-plus'
  import router from '@/router'
  import axios from 'axios';
  
  // 背景动画初始化
  const initCanvasBg = () => {
	const canvas = document.getElementById('canvas-bg') as HTMLCanvasElement
	const ctx = canvas.getContext('2d')
	
	canvas.width = window.innerWidth
	canvas.height = window.innerHeight
	
	const particles: any[] = []
	const particleCount = 80
	const colors = ['rgba(100, 149, 237, 0.5)', 'rgba(138, 43, 226, 0.5)', 'rgba(75, 0, 130, 0.5)']
	
	// 创建粒子
	for (let i = 0; i < particleCount; i++) {
	  particles.push({
		x: Math.random() * canvas.width,
		y: Math.random() * canvas.height,
		size: Math.random() * 3 + 1,
		speedX: Math.random() * 2 - 1,
		speedY: Math.random() * 2 - 1,
		color: colors[Math.floor(Math.random() * colors.length)]
	  })
	}
	
	// 动画循环
	const animate = () => {
	  ctx.clearRect(0, 0, canvas.width, canvas.height)
	  
	  // 更新和绘制粒子
	  for (let i = 0; i < particles.length; i++) {
		const p = particles[i]
		
		p.x += p.speedX
		p.y += p.speedY
		
		// 边界检查
		if (p.x < 0 || p.x > canvas.width) p.speedX *= -1
		if (p.y < 0 || p.y > canvas.height) p.speedY *= -1
		
		// 绘制粒子
		ctx.beginPath()
		ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2)
		ctx.fillStyle = p.color
		ctx.fill()
		
		// 绘制连接线
		for (let j = i + 1; j < particles.length; j++) {
		  const p2 = particles[j]
		  const distance = Math.sqrt(Math.pow(p.x - p2.x, 2) + Math.pow(p.y - p2.y, 2))
		  
		  if (distance < 100) {
			ctx.beginPath()
			ctx.strokeStyle = `rgba(100, 149, 237, ${1 - distance / 100})`
			ctx.lineWidth = 0.5
			ctx.moveTo(p.x, p.y)
			ctx.lineTo(p2.x, p2.y)
			ctx.stroke()
		  }
		}
	  }
	  
	  requestAnimationFrame(animate)
	}
	
	animate()
	
	// 窗口大小调整
	window.addEventListener('resize', () => {
	  canvas.width = window.innerWidth
	  canvas.height = window.innerHeight
	})
  }
  
  onMounted(() => {
	initCanvasBg()
  })
  
  // 注册表单逻辑
  interface RegisterForm {
	u_name: string
	u_email: string
	u_pwd: string
	confirmPwd: string
  }
  
  const loading = ref(false)
  const registerFormRef = ref<FormInstance>()
  const registerForm = reactive<RegisterForm>({
	u_name: '',
	u_email: '',
	u_pwd: '',
	confirmPwd: ''
  })
  
  // 验证规则
  const validateUsername = (rule: any, value: string, callback: any) => {
	if (!value) {
	  callback(new Error('请输入用户名'))
	} else if (value.length < 3) {
	  callback(new Error('用户名长度不能少于3位'))
	} else {
	  callback()
	}
  }
  
  const validateEmail = (rule: any, value: string, callback: any) => {
	const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
	if (!value) {
	  callback(new Error('请输入邮箱'))
	} else if (!emailRegex.test(value)) {
	  callback(new Error('请输入正确的邮箱格式'))
	} else {
	  callback()
	}
  }
  
  const validatePassword = (rule: any, value: string, callback: any) => {
	if (!value) {
	  callback(new Error('请输入密码'))
	} else if (value.length < 6) {
	  callback(new Error('密码长度不能少于6位'))
	} else {
	  callback()
	}
  }
  
  const validateConfirmPwd = (rule: any, value: string, callback: any) => {
	if (!value) {
	  callback(new Error('请再次输入密码'))
	} else if (value !== registerForm.u_pwd) {
	  callback(new Error('两次输入的密码不一致'))
	} else {
	  callback()
	}
  }
  
  const rules = reactive<FormRules<RegisterForm>>({
	u_name: [{ validator: validateUsername, trigger: 'blur' }],
	u_email: [{ validator: validateEmail, trigger: 'blur' }],
	u_pwd: [{ validator: validatePassword, trigger: 'blur' }],
	confirmPwd: [{ validator: validateConfirmPwd, trigger: 'blur' }]
  })
  
  // 提交表单
  const submitForm = async (formEl: FormInstance | undefined) => {
	if (!formEl) return
	
	try {
	  await formEl.validate()
	  loading.value = true
	  
	  const response = await axios.post('/api/register', {
      email: registerForm.u_email,
      password: registerForm.u_pwd,
      username: registerForm.u_name,
	  confirmPassword: registerForm.confirmPwd
    });
	  
	  ElMessage.success('注册成功')
	  router.push('/')
	} catch (error) {
	  console.error('注册失败', error)
	  ElMessage.error(`${error.response.data.error}`)
	} finally {
	  loading.value = false
	}
  }
  </script>
  
  <style scoped lang="scss">
  .register-container {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
	font-family: 'Helvetica Neue', Arial, sans-serif;
	
	#canvas-bg {
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  z-index: 1;
	}
  }
  
  .register-form {
	position: relative;
	z-index: 2;
	background-color: rgba(15, 23, 42, 0.8);
	padding: 2.5rem 3rem;
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
	width: 100%;
	max-width: 450px;
	backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	transition: all 0.3s ease;
	
	&:hover {
	  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
	}
  }
  
  .register-title {
	text-align: center;
	color: #fff;
	font-size: 1.8rem;
	margin-bottom: 2rem;
	font-weight: 600;
  }
  
  :deep(.el-form) {
	.el-form-item__label {
	  color: rgba(255, 255, 255, 0.8);
	  padding-bottom: 0.5rem;
	}
	
	.el-input {
	  .el-input__wrapper {
		background-color: rgba(255, 255, 255, 0.05);
		border: 1px solid rgba(255, 255, 255, 0.1);
		box-shadow: none;
		transition: all 0.3s ease;
		
		&:hover {
		  border-color: rgba(255, 255, 255, 0.3);
		}
		
		&.is-focus {
		  border-color: #6366f1;
		  box-shadow: 0 0 0 1px #6366f1;
		}
	  }
	  
	  .el-input__inner {
		color: #fff;
		
		&::placeholder {
		  color: rgba(255, 255, 255, 0.4);
		}
	  }
	  
	  .el-input__prefix {
		color: rgba(255, 255, 255, 0.6);
	  }
	}
  }
  
  .submit-button {
	width: 100%;
	height: 46px;
	border-radius: 8px;
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: 0.5px;
	margin-top: 1rem;
	background: linear-gradient(to right, #6366f1, #8b5cf6);
	border: none;
	transition: all 0.3s ease;
	
	&:hover {
	  background: linear-gradient(to right, #4f46e5, #7c3aed);
	  transform: translateY(-2px);
	}
	
	&:active {
	  transform: translateY(0);
	}
  }
  
  .form-footer {
	text-align: center;
	margin-top: 1.5rem;
	color: rgba(255, 255, 255, 0.6);
	font-size: 0.95rem;
	
	a {
	  color: #6366f1;
	  text-decoration: none;
	  margin-left: 0.5rem;
	  font-weight: 500;
	  cursor: pointer;
	  transition: all 0.2s ease;
	  
	  &:hover {
		text-decoration: underline;
	  }
	}
  }
  
  /* 响应式调整 */
  @media (max-width: 480px) {
	.register-form {
	  padding: 2rem 1.5rem;
	  margin: 0 1rem;
	}
	
	.register-title {
	  font-size: 1.5rem;
	}
  }
  </style>